<script  setup >
import { onBeforeMount, onMounted, ref } from 'vue'
import BarChart from '@/echarts/BarChart.vue';
import PieChart from '@/echarts/PieChart.vue';
import {Delete, FolderChecked} from '@element-plus/icons-vue'
import { getRecordsAPI } from '@/api/records';
const totalData = ref(null)
// 月份柱状图收益数据
const monthData = ref([
  {
    month_income: 100,
    month_expend: 100,
    month_balance: 100,
  },])
// 类型饼状图数据
const typeData = ref(null)
// 消息提示列表
const messageList = ref([
{ 
    id: '01',
    title: '添加员工张三',
    tag: '人事',
    content: '具体人事变动啊手动阀手动阀撒旦发阿斯蒂芬萨芬'

  },
  { 
    id: '02',
    title: '添加楼宇24栋',
    tag: '房屋',
    content: '具体楼宇添加'

  },
  { 
    id: '03',
    title: '添加楼宇25栋',
    tag: '房屋',
    content: '具体楼宇添加'

  }

])
// 已读销毁状态
const hasRead=(id) => {
  messageList.value =messageList.value.filter(item => item.id !== id )
}
// 加载状态定义数据
const loading = ref(true)

const lists = ref([])
const setLoading = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 2000)
}
const getRecordsList = async () => {
    const res = await getRecordsAPI()
    // console.log('res',res)
    if(res.code == 200){
      // 获取月份收益总数据
      monthData.value = res.data.map(item => ({
        month: item.month,
        month_income: item.total_income,
        month_expend: item.total_expend,
        month_balance: item.total_balance, 
      }));
      // 获取类别收益数据
      typeData.value = [
        {
          name: '商业收益',
          value: res.data.reduce((accumulator, product) => {
            return accumulator + product.income_business
          }, 0).toFixed(2),
        },
        {
          name: '民用收益',
          value: res.data.reduce((accumulator, product) => {
            return accumulator + product.income_civil
          }, 0).toFixed(2),
        },
        {
          name: '停车收益',
          value: res.data.reduce((accumulator, product) => {
            return accumulator + product.income_car
          }, 0).toFixed(2),
        },
        {
          name: '商业支出',
          value: res.data.reduce((accumulator, product) => {
            return accumulator + product.expend_business
          }, 0).toFixed(2),
        },
        {
          name: '民用支出',
          value: res.data.reduce((accumulator, product) => {
            return accumulator + product.expend_civil
          }, 0).toFixed(2),
        },
        {
          name: '停车支出',
          value: res.data.reduce((accumulator, product) => {
            return accumulator + product.expend_car
          }, 0).toFixed(2),
        }
      ]
      // 面板总数据
      totalData.value ={
        title: '上半年收支数据(万)',
        totalMoney : res.data.reduce((accumulator, product) => {
          return accumulator + product.total_income
        }, 0).toFixed(2),
        totalExpend : res.data.reduce((accumulator, product) => {
          return accumulator + product.total_expend
        }, 0).toFixed(2),
        totalBalance : res.data.reduce((accumulator, product) => {
          return accumulator + product.total_balance
        }, 0).toFixed(2),
      }
    }
    // 月份数据
    // console.log('home-monthData',monthData.value);
    // 类型数据
    // console.log('typeData',typeData.value);
    // 总数据
    console.log('totalData',totalData.value);
    
  }

onBeforeMount(() => {
  getRecordsList()
  loading.value = false
  lists.value = [
    {
      imgUrl:
        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
      info: '报告大王，出现野生🦌',
    },
    {
      imgUrl:
        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
      info: '不知道哪个用户在在养马',
    },
    {
      imgUrl:
        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
      info: '要搬家了，这太不安全了，有🦁',
    },
  ]
})
</script>

<template>
  <div class="home-page">
    <div class="left-page">
      <div class="total-data" style="width: 100%;height: 125px;">
        <div class="total-title"><h1>&nbsp; 园区收支数据</h1></div>
        <el-row v-if="totalData" style="padding-left: 20px;padding-top: 15px;">
          <el-col :span="6">
            <!-- 这里要传入number类型，但我传入了string，报错 -->
            <el-statistic title="年份（上/下半年）" value-style="font-size: 16px" :value="totalData.title" />
          </el-col>
          <el-col :span="6">
            <el-statistic :value="parseFloat(totalData.totalMoney)" :precision="2" >
              <template #title>
                <div style="display: inline-flex; align-items: center">
                  收入   b
                </div>
              </template>
            </el-statistic>
          </el-col>
          <el-col :span="6">
            <el-statistic title="支出" :value="parseFloat(totalData.totalExpend)" :precision="2" />
          </el-col>
          <el-col :span="6">
            <el-statistic title="结余" :value="parseFloat(totalData.totalBalance)" :precision="2" />
          </el-col>
        </el-row>
        </div>
        <div class="bar-chart">
          <BarChart v-if="monthData" :monthData="monthData"></BarChart>
        </div>
        <el-space style="width: 100%" fill>
          <div>
            <el-button @click="setLoading">园区异常信息</el-button>
          </div>
          <el-skeleton
            style="display: flex; gap: 8px"
            :loading="loading"
            animated
            :count="3"
          >
          
            <template #template>

              <div style="flex: 1">
                <el-skeleton-item variant="image" style="height: 200px" />
                <div style="padding: 14px">
                  <el-skeleton-item variant="h3" style="width: 100%" />
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      justify-items: space-between;
                      margin-top: 16px;
                      height: 16px;
                    "
                  >
                  </div>
                </div>
              </div>
            </template>
            <template #default>
              <el-card
                v-for="item in lists"
                :key="item.name"
                :body-style="{ padding: '0px', marginBottom: '1px' }"
              >
                <img
                  :src="item.imgUrl"
                  class="image multi-content"
                  style="max-width: 100%"
                />
                <div style="padding: 14px">
                  <span>{{ item.info }}</span>
                </div>
              </el-card>
            </template>
          </el-skeleton>
        </el-space>
    </div>
    <!-- 右半部分 -->
    <div class="quick-enter">
      <h3>快捷入口</h3>
      <div class="quick-img">
        <router-link to="/park/building"> 
        <div style="text-align: center; display: flex; flex-direction: column;">
          <img src="../../assets/quick-enter-images/image01.png" alt="">
          <span>添加楼宇</span>
        </div>
      </router-link>
      <router-link to="/park/person"> 
        <div style="text-align: center; display: flex; flex-direction: column;">
          <img src="../../assets/quick-enter-images/image02.png" alt="">
          <span>人员管理</span>
        </div>
      </router-link>
      <router-link to="/car/carMonth"> 
        <div style="text-align: center; display: flex; flex-direction: column;">
          <img src="../../assets/quick-enter-images/image03.png" alt="">
          <span>区域管理</span>
        </div>
      </router-link>
      <router-link to="/car/carRule"> 
      <div style="text-align: center; display: flex; flex-direction: column;">
          <img src="../../assets/quick-enter-images/image04.png" alt="">
          <span>计费规则</span>
        </div>
      </router-link>
      </div>
      <div style="width: 100%; height: 300px;margin-top: 70px;">
         <PieChart v-if="typeData" :typeData="typeData"></PieChart>
      </div>
      <div class="message">
        <h3>消息提示</h3>
        <el-card v-if="messageList.length >0" style="max-width: 320px;min-height: 200px; margin: 10px auto">
          <div class="message-list" v-for="(item, index) in messageList" :key="item.id" style="">
            <div style="height: 60px; display: flex; align-items: center;" @click="openMesssage(item.id)">
              <div class="message-tag">{{item.tag}}</div>
              <div>
                <div class="message-text" ><b>标题：</b><span>{{item.title}}</span></div>
                <div class="message-text" ><b>内容：</b><span>{{item.content}}</span></div>
              </div>
              <div>
                <el-button style="font-size: 20px;border-radius: 10px; width: 40px" type="warning" @click="hasRead(item.id)">
                  <el-icon><FolderChecked /></el-icon>
                </el-button>
              </div>
            </div>  
          </div>
        </el-card>
        <el-empty v-else description="暂无消息">
          <el-button type="primary"  style="width: 200px;margin: 0 60px;border-radius: 30px; ">更多 &gt;</el-button>
        </el-empty>

      </div>

    </div>
  </div>
</template>

<style scoped lang='scss'>

.home-page{
    color: #535353;
    width: 100%;
    height: 100%;
    padding: 20px;
    overflow: auto;
    display: flex;
    justify-content: space-around;
    .left-page{
      width: 70%;
      height:100%; 
      min-height: 500px;
      min-width: 800px;
       // 柱状图样式
      .bar-chart {
        width: 100%;
        height: 50%;
        min-height: 300px;
        margin-top: 30px;
      }
    }
    .quick-enter{
      margin-left: 10%;
      min-width: 320px;
      
      .quick-img{
        width: 100%;
        height: 40px;
        margin-top: 20px;
        display: flex;
        justify-content: space-around;
        margin-bottom: 40px;
        img{
          width: 60px;
          height: 60px;
        }
        span{
          font-size: 14px;
        }
      }
      .message {
        margin-top: 20px;
        .message-list {
          margin-top: 10px;
          .message-tag{
            height: 45px;
            line-height: 45px;
            width:50px;
            background-color: skyblue;
            border-radius: 10px;
            color: #fff;
            text-align: center;
          }
          .message-text{
              height: 30px;
              line-height: 30px;
              margin-left: 10px;
              width: 180px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
        }
        
      }
    }

   
}

.el-table::before {
  height: 0;
}
.el-col {
  text-align: center;
}

</style>